<template>
  <div>
    <swiper class="swiper" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
      <!-- slides -->
      <swiper-slide class="swiper-slide" v-for="item in banner" :key="item.id">
        <img class="swiperImage" :src="item.image" :alt="item.name" />
      </swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { banner } from "../../../api/api";
export default {
  name: "swiperhome",
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        loop: true,
        autoplay: 1000
      },
      banner: []
    };
  },
  created(){
    // 数据测试
    // this.$http.get("http://vue.thexxdd.cn/tourism/").then(res => {
    //   console.log("测试:",res);
    // })
  },
  // 钩子函数
  mounted() {
    // 这里有无{}都可以为了好看
    banner()
      .then(res => {
        console.log("轮播数据:", res.data);
        this.banner = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style scoped>
</style>
